<template>
	<view>

		<view class="tabbars u-f-ac">
			<view class="items_tab u-f-column u-f-ajc" v-for="(item, index) in list" :key="index"
				@click="beforeSwitch(index)" :class="current === index ? 'actives' : ''">
				<image v-if="current === index" :src=" item.iconPath"></image>
				<image v-else :src="item.selectedIconPath"></image>
				<view>{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: -1
			},
		},
		data() {
			return {
				list: [{
						"selectedIconPath": "/static/images/cxsytarbbars/za_home.png",
						"iconPath": "/static/images/cxsytarbbars/za_home_active.png",
						"pagePath": "/pagesZA/home/home",
						"text": "首页"
					},
					{
						"selectedIconPath": "/static/images/cxsytarbbars/za_position.png",
						"iconPath": "/static/images/cxsytarbbars/za_position_active.png",
						"pagePath": "/pagesZA/medias/medias",
						"text": "资讯"
					},
					{
						"selectedIconPath": "/static/images/cxsytarbbars/za_qianbao.png",
						"iconPath": "/static/images/cxsytarbbars/za_qianbao_active.png",
						"pagePath": "/pagesZA/qianbao/qianbao",
						"text": "钱包"
					},
					{
						"selectedIconPath": "/static/images/cxsytarbbars/za_mine.png",
						"iconPath": "/static/images/cxsytarbbars/za_mine_active.png",
						"pagePath": "/pages/commission/qrcode/qrcode",
						"text": "个人中心"
					},
				],
			}
		},
		mounted() {
			
			
		},
		methods: {
			beforeSwitch(index) {
				
					uni.navigateTo({
						url: this.list[index].pagePath
					})
			

			},
		}
	}
</script>

<style lang="scss">
	.tabbars {
		position: fixed;
		z-index: 100;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 150rpx;
		background-color: #ffffff;
		padding-top: 10rpx;
		.items_tab {
			width: 25%;
			height: 100%;

			view {
				color: #7f7f80;
				font-size: 24rpx;
				line-height: 1;
				margin-top: 10rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.actives {
			view {
				color: #001b4d !important;
			}
		}
	}
</style>